<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form class="form-inline">
    <input class="form-control mr-sm-2 md-sm-4" type="search" placeholder="Search" aria-label="Search"
           id="search">
    <button class="btn btn-outline-light my-2 my-sm-0" type="submit" id="submit">Search</button>
</form>
<script>
    'use strict';
    $(() => {
        $('#search').keyup(() => {

            $('#show').html('').hide();
            $('#show').css("position", "absolute");
            let keyword = $('#search').val();
            console.log(keyword);
            if (!keyword.trim()) return;
            let url = 'http://localhost:8080/search';
            let params = 'keyword=' + keyword;

            $.post(url, params,
                (data, textStatus, jqXHR) => {
                    console.log(data);
                    let str = '';
                    $.each($(data), (indexInArray, valueOfElement) => {
                        // str +=
                        //     "<div οnmοuseοver='fun1(this)' οnmοuseοut='fun2(this)' οnclick='fun3(this)'>" +
                        //     valueOfElement + "</div>";
                        str +=
                            "<li class='nav-item stop' οnmοuseοver='fun1(this)' οnmοuseοut='fun2(this)' οnclick='fun3(this)'>" +
                            "<a class='nav-link' href=''>" + valueOfElement +
                            "</a> </li>";
                        // str += "<option value="+indexInArray+">"+valueOfElement+"</option>"

                    });
                    console.log(str);
                    $('#show').html(str).show();
                }, "json");
            $('.stop').mouseout(() => {
                $('#show').css("display", "none");
            });
        });
        $('#submit').on('click', () => {
            let keyword = $('#search').val().trim();
            $.post("http://localhost:8080/search", {
                    "keyword": keyword
                },
                (data, textStatus, jqXHR) => {}, "json");
        });
    });

    let fun1 = (param) => {
        $(param).css('background-color', 'gray');
    }

    let fun2 = (param) => {
        $(param).css('background-color', 'white');
    }

    let fun3 = (param) => {
        let text = $(param).text();
        $('#search').val(text);
        $('#show').hide();
    }
</script>
</body>
</html>